<template>
	<view class="u-page">
		<u-navbar
			title="表单"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
		></u-navbar>
		<view class="u-demo-block">
			<text class="u-demo-block__title"></text>
			<view class="u-demo-block__content">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
					labelPosition="left"
					:model="model1"
					ref="form1"
				>
				真实姓名
					<u-form-item
						label=""
						prop="userInfo.realname"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.realname"
							border="none"
							placeholder="姓名,只能为中文"
						></u--input>
					</u-form-item>
					性别
					<u-form-item
						label=""
						prop="userInfo.sex"
						borderBottom
						@click="showSex = true; hideKeyboard()"
						ref="item1"
					>
						<u--input
							v-model="model1.userInfo.sex"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择性别"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					出生日期
					<u-form-item
						label=""
						prop="userInfo.birthdate"
						borderBottom
						@click="showbirthdate = true; hideKeyboard()"
						ref="item1"
					>
					
						<u--input
							v-model="model1.userInfo.birthdate"
							disabled
							
							disabledColor="#ffffff"
							placeholder="请选择生日"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
					
					
					身份证号码
						<u-form-item
							label=""
							prop="userInfo.idnumber"
							borderBottom
							ref="item1"
						>
							<u--input
								v-model="model1.userInfo.idnumber"
								border="none"
								placeholder="请输入身份证号码"
							></u--input>
						</u-form-item>
					居住地址
						<u-form-item
							label=""
							prop="userInfo.address"
							borderBottom
							ref="item1"
						>
							<u--input
								v-model="model1.userInfo.address"
								border="none"
								placeholder="请输入居住地址"
							></u--input>
						</u-form-item>
					<u-button type="info" @tap="uploadImage1">上传身份证正面照</u-button>
					<image v-if="imageUrl1" :src="imageUrl1" mode="aspectFit" style="width: 300rpx; height: 300rpx;"></image>
					<u-button type="info" @tap="uploadImage2">上传身份证反面照</u-button>
					<image v-if="imageUrl2" :src="imageUrl2" mode="aspectFit" style="width: 300rpx; height: 300rpx;"></image>
					
					备注
						<u-form-item
							label=""
							prop="userInfo.remark"
							borderBottom
							ref="item1"
						>
							<u--input
								v-model="model1.userInfo.remark"
								border="none"
								placeholder="请输入备注"
							></u--input>
						</u-form-item>
					
					
				</u--form>
				<u-button
					type="primary"
					text="提交"
					customStyle="margin-top: 50px"
					@click="submit"
				></u-button>
				<u-button
					type="error"
					text="重置"
					customStyle="margin-top: 10px"
					@click="reset"
				></u-button>
				<u-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择性别(男--1,女--0)"
					@close="showSex = false"
					@select="sexSelect"
				>
				</u-action-sheet>
				<u-datetime-picker
					:show="showbirthdate"
					:value="birthdate"
					mode="date"
					closeOnClickOverlay
					@confirm="birthdateConfirm"
					@cancel="birthdateClose"
					@close="birthdateClose"
				></u-datetime-picker>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showbirthdate: false,
				imageUrl1:'',
				imageUrl2:'',
				model1: {
					userInfo: {
						id:'',
						realname:'',
						sex:'',
						birthdate: '',
						idnumber:'',
						address:'',
						state:'0',
						image1:'',
						image2:'',
						remark:'',
						// audittime:'0',
						// applytime:'0',
						// auditorId:'0',
						applierId:uni.getStorageSync('userInfo_id'),
						
					},
					radiovalue1: '苹果',
					checkboxValue1: [],
					intro: '',
					code: ''
				},
				showSex: false,
				
				actions: [{
						name: 1,
					},
					{
						name: 0,
					},
				
				],
				rules: {
					'userInfo.realname': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "姓名必须为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					'userInfo.idnumber': [{
						type: 'string',
						required: true,
						message: '请填写身份证号码',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.idCard(value);
						},
						message: "身份证有误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					'userInfo.address': [{
						type: 'string',
						required: true,
						message: '请填写居住地址',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "居住地址有误",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					'userInfo.remark': [{
						type: 'string',
						required: true,
						message: '请填写备注',
						trigger: ['blur', 'change']
					}, {
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return uni.$u.test.chinese(value);
						},
						message: "备注为中文",
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ["change", "blur"],
					}],
					
					// 'userInfo.sex': {
					// 	type: 'string',
					// 	max: 1,
					// 	required: true,
					// 	message: '请选择男或女',
					// 	trigger: ['blur', 'change']
					// },
					
					
					
				
				
					'userInfo.birthdate': {
						type: 'string',
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
				},
				
			
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			afterRead(event) {
				this.fileList1.push({
					url: event.file,
					status: 'uploading',
					message: '上传中'
				})
			},
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				// console.log('radioChange', n);
			},
			navigateBack() {
				uni.navigateBack()
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			change(e) {
				// console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},
			calendarConfirm(e) {
				this.showCalendar = false
				this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
				this.$refs.form1.validateField('hotel')
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			calendarClose() {
				this.showCalendar = false
				this.$refs.form1.validateField('hotel')
			},
			birthdateClose() {
				this.showbirthdate = false
				this.$refs.form1.validateField('userInfo.birthdate')
			},
			birthdateConfirm(e) {
				this.showbirthdate = false
				this.model1.userInfo.birthdate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.$refs.form1.validateField('userInfo.birthdate')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				
				this.$refs.form1.validate().then(res => {
					
					
					
					uni.$u.toast('校验通过')
					this.$api({
						method: 'post',
						url: '/system/realauth/attestation',
						 data: this.model1.userInfo
					}).then(res => {
						
						uni.reLaunch({
							url:"/pages/home/home"
						})
					}).catch(err => {
						console.log(err)
					});
					
					console.log(this.model1.userInfo);
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
				'hotel', 'code', 'userInfo.birthday']
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				setTimeout(()=>{
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				},10)
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			
			uploadImage1() {
			  uni.chooseImage({
			    count: 1,
			    success: (res) => {
			      const tempFilePaths = res.tempFilePaths
			      this.imageUrl1 = tempFilePaths[0] // 将选择的图片路径保存到data中
			      uni.uploadFile({
			        url: 'http://192.168.27.3:8866/system/upload/uploadImage',
			        filePath: tempFilePaths[0],
			        name: 'uploadImage',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
			          console.log(uploadFileRes.data)
					  let dat = JSON.parse(uploadFileRes.data)
					  let imageData = dat.data;
					  this.model1.userInfo.image1 = imageData;
					  console.log("imageData"+imageData);
			        }
			      })
			    }
			  })
			},
			uploadImage2() {
			  uni.chooseImage({
			    count: 1,
			    success: (res) => {
			      const tempFilePaths = res.tempFilePaths
			      this.imageUrl2 = tempFilePaths[0] // 将选择的图片路径保存到data中
			      uni.uploadFile({
			        url: 'http://192.168.27.3:8866/system/upload/uploadImage',
			        filePath: tempFilePaths[0],
			        name: 'uploadImage',
			        formData: {
			          'user': 'test'
			        },
			        success: (uploadFileRes) => {
			          console.log(uploadFileRes.data)
					  let dat = JSON.parse(uploadFileRes.data)
					  let imageData = dat.data;
					  this.model1.userInfo.image2 = imageData;
					  console.log("imageData"+imageData);
			        }
			      })
			    }
			  })
			}
		},
	}
</script>

<style lang="scss">

</style>




<!-- // <template>
//   <view>
//     <button @tap="uploadImage">上传图片</button>
//     <button @tap="uploadVideo">上传视频</button>
//   </view>
// </template> -->


//   export default {
//     methods: {
//       uploadImage() {
//         uni.chooseImage({
//           count: 1,
//           success: (res) => {
//             const tempFilePaths = res.tempFilePaths
//             uni.uploadFile({
//               url: 'http://192.168.27.3:8866/system/upload/uploadImage',
//               filePath: tempFilePaths[0],
//               name: 'uploadImage',
//               formData: {
//                 'user': 'test'
//               },
//               success: (uploadFileRes) => {
//                 console.log(uploadFileRes.data)
//               }
//             })
//           }
//         })
		
//       },
// 	   uploadVideo() {
// 	           uni.chooseVideo({
// 	             sourceType: ['album', 'camera'],
// 	             maxDuration: 60,
// 	             camera: 'back',
// 	             success: (chooseVideoRes) => {
// 	               uni.uploadFile({
// 	                 url: 'http://192.168.27.3:8866/system/upload/uploadVideo',
// 	                 filePath: chooseVideoRes.tempFilePath,
// 	                 name: 'uploadVideo',
// 	                 formData: {
// 	                   'user': 'test'
// 	                 },
// 	                 success: (uploadFileRes) => {
// 	                   console.log(uploadFileRes.data)
// 	                 }
// 	               })
// 	             }
// 	           })
// 	         }
//     }
//   }
